/**
 * 卡片管理
 */
var React = require("react");
var {BootstrapTable,TableHeaderColumn} = require("react-bootstrap-table");
var {Button} = require("react-bootstrap");
var {ListPage,Util} = require("flower");
var ShowCheckbox = require("/react/admin/grid/ShowCheckbox.jsx");
class Index extends ListPage{

    constructor(props){
        super(props);
        this.state = {

        };
        this.selectRow={
            mode:'checkbox'
        }
        this.options = {
            paginationShowsTotal: Util.renderPaginationShowsTotal
        };
    }

    //加载数据
    loadData(){
        return Util.get("/grid/list");
    }


    optionFormat(cell,row){
        return <span>
            <Button bsStyle="success" bsSize="xsmall" style={{marginRight:"10px"}} onClick={()=>{
                Util.goto("/load/admin/grid/Add.jsx",{dataId:row.id});
            }}>编辑</Button>
            <Button bsStyle="danger" bsSize="xsmall" onClick={()=>{
                if(confirm("真的要删除["+row.key+"]卡片吗?")){
                    var param = {
                        id:row.id
                    }
                    var ret = Util.get("/grid/delete",param);
                    if(ret.state == 200){
                        alert("删除成功!");
                        Util.goto("/load/admin/grid/Index.jsx");
                    }else{
                        alert("删除失败！原因:"+ret.msg);
                    }

                }

            }}>删除</Button>
        </span>
    }

    title(){
        var data = [
            {name:"首页",href:"/show/admin/Main.jsx"},
            {name:"卡片管理",href:""}
        ];
        return this.cbb(data);
    }

    onAdd(){
        Util.goto("/load/admin/grid/Add.jsx");
    }
    option(){
        return <span>
                <Button bsStyle="primary" bsSize="small" onClick={this.onAdd.bind(this)}>新增</Button>
           </span>

    }

    changeCheck(rowId,checked){
        console.info(rowId+":"+checked);
        var data = {
            id:rowId,
            checked:checked
        };
        var ret = Util.post("/grid/changeShow",data);
        console.info(ret);
    }

    //是否显示格式化
    showFormat(cell, row) {
        var checked = false;
        if(cell=="1"){
            checked = true;
        }
        return <ShowCheckbox rowId={row.id} defaultValue={checked} _handleChange={this.changeCheck.bind(this)}/>
    }

    content(){
        return <BootstrapTable data={this.loadData()} striped condensed hover pagination
                               headerStyle={{textAlign:"center"}}
                               options={this.options}
                               selectRow={ this.selectRow }
                               search = {true}
        >
            <TableHeaderColumn hidden isKey dataField='id'>ID</TableHeaderColumn>
            <TableHeaderColumn dataField='key' dataSort={true}>卡片key</TableHeaderColumn>
            <TableHeaderColumn dataField='sortOrder' width="60px" dataAlign="center" dataSort={true}>排序</TableHeaderColumn>
            <TableHeaderColumn dataField='sortName'>卡片分类</TableHeaderColumn>
            <TableHeaderColumn dataField='isShow' dataAlign="center" width="60px" dataFormat={this.showFormat.bind(this)}>显示</TableHeaderColumn>
            <TableHeaderColumn dataField='creator' dataAlign="center" width="80px">创建人</TableHeaderColumn>
            <TableHeaderColumn dataField='createTime' dataAlign="center" dataFormat={ Util.timeFormat }>创建时间</TableHeaderColumn>
            <TableHeaderColumn dataField='editor' dataAlign="center" width="80px">修改人</TableHeaderColumn>
            <TableHeaderColumn dataField='lastEditTime' dataAlign="center"  dataFormat={ Util.timeFormat }>最后修改时间</TableHeaderColumn>
            <TableHeaderColumn dataField='option' dataAlign="center" width="100px" dataFormat={ this.optionFormat }>操作</TableHeaderColumn>
        </BootstrapTable>
    }
}
module.exports = Index;